<template>
  <n-button-group>
    <n-button @click="activate('right')"> 更多 </n-button>
  </n-button-group>

  <n-drawer v-model:show="active" :width="502" :placement="placement">
    <n-drawer-content title="标签">
      <div style="display: flex">
        <QuerySelect name="days" label="时间" :options="daysOptions" style="margin: 1rem" />

        <QuerySelect
          name="isFinished"
          label="完成情况"
          :options="isFinishedOptions"
          style="margin: 1rem"
        />
      </div>

      <n-list>
        <n-list-item v-for="memo in Memos.memos" :key="memo.id" display="flex">
          <n-thing>
            <p>{{ memo.content }}</p>
            <p class="text-xs text-gray-500">{{
              format(new Date(memo.found_time), 'yyyy-MM-dd HH:mm:ss')
            }}</p>
          </n-thing>
          <n-popconfirm :show-icon="false" @positive-click="Memos.finishMemo(memo.id)">
            <template #trigger>
              <n-button type="info" style="margin-left: 20rem" :disabled="!!memo.finish_time"
                >完成</n-button
              >
            </template>
            是否完成该标签？
          </n-popconfirm>
        </n-list-item>
      </n-list>
    </n-drawer-content>
  </n-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import type { DrawerPlacement } from 'naive-ui';
  import { memoStore } from '@/store/modules/task';
  import QuerySelect from '@/views/dashboard/workplace/QuerySelect.vue';
  import { format } from 'date-fns';
  const active = ref(false);
  const placement = ref<DrawerPlacement>('right');
  const activate = (place: DrawerPlacement) => {
    active.value = true;
    placement.value = place;
  };
  const Memos = memoStore();
  Memos.searches();
  const daysOptions = [
      { label: '7天内', value: '7' },
      { label: '两周内', value: '14' },
      { label: '一个月内', value: '30' },
      { label: '三个月内', value: '90' },
      { label: '半年内', value: '180' },
    ],
    isFinishedOptions = [
      {
        label: '已完成',
        value: true,
      },
      {
        label: '未完成',
        value: false,
      },
    ];
</script>
